<template>
  <ContentWrap>
    <div class="routeHeader mb-5px">
    <el-button @click="closeData">关闭</el-button>
  </div>
  </ContentWrap>
  
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="110px"
    >
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
          clearable
          disabled
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          disabled
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="图纸图号" prop="drawingNumber">
        <el-input
          v-model="queryParams.drawingNumber"
          placeholder="请输入图纸图号"
          clearable
          disabled
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品规格" prop="productStandard">
        <el-input
          v-model="queryParams.productStandard"
          placeholder="请输入产品规格"
          clearable
          disabled
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input
          v-model="queryParams.version"
          placeholder="请输入版本号"
          clearable
          disabled
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table :data="list" border :height="tableHeight">
      <el-table-column label="编号" align="left" prop="code" width="180">
        <template #default="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="部件编号" align="left" prop="partNumber" width="180">
        <template #default="scope">
          {{ scope.row.partNumber }}
        </template>
      </el-table-column>
      <el-table-column label="部件名称" align="left" prop="partName" width="180">
        <template #default="scope">
          {{ scope.row.partName }}
        </template>
      </el-table-column>
      <el-table-column label="图纸图号" align="left" prop="drawingNumber" width="180">
        <template #default="scope">
          {{ scope.row.drawingNumber }}
        </template>
      </el-table-column>
      <el-table-column label="部件规格" align="left" prop="partSpecification" width="180">
        <template #default="scope">
          {{ scope.row.partSpecification }}
        </template>
      </el-table-column>
      <el-table-column label="材质" align="left" prop="material" width="180">
        <template #default="scope">
          {{ scope.row.material }}
        </template>
      </el-table-column>
      <el-table-column label="规格" align="left" prop="specification" width="180">
        <template #default="scope">
          {{ scope.row.specification }}
        </template>
      </el-table-column>
      <el-table-column label="净尺寸(长)" align="left" prop="netSizeLength" width="180">
        <template #default="scope">
          {{ scope.row.netSizeLength }}
        </template>
      </el-table-column>
      <el-table-column label="净尺寸(宽)" align="left" prop="netSizeWidth" width="180">
        <template #default="scope">
          {{ scope.row.netSizeWidth }}
        </template>
      </el-table-column>
      <el-table-column label="下料尺寸(长)" align="left" prop="cuttingSizeLength" width="180">
        <template #default="scope">
          {{ scope.row.cuttingSizeLength }}
        </template>
      </el-table-column>
      <el-table-column label="下料尺寸(宽)" align="left" prop="cuttingSizeWidth" width="180">
        <template #default="scope">
          {{ scope.row.cuttingSizeWidth }}
        </template>
      </el-table-column>
      <el-table-column label="基本用量" align="left" prop="basicDosage" width="180">
        <template #default="scope">
          {{ scope.row.basicDosage }}
        </template>
      </el-table-column>
      <el-table-column label="单位" align="left" prop="partUnit" width="180">
        <template #default="scope">
          {{ scope.row.partUnit }}
        </template>
      </el-table-column>
      <el-table-column label="内作" align="left" prop="dictInternalWork" width="180">
        <template #default="scope">
          <input
            type="checkbox"
            v-model="scope.row.dictInternalWork"
            :disabled="scope.row.isCanDisable"
            class="custom-checkbox"
          />
        </template>
      </el-table-column>
      <el-table-column label="工序名称" align="left" prop="dictProcessName" width="180">
        <template #default="scope">
          <el-select
            :disabled="scope.row.isCanDisable"
            v-model="scope.row.dictProcessName"
            placeholder="请选择工序名称"
            required
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(DICT_TYPE.CRAFT_PROCESS_NAME)"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="下料工序" align="left" prop="dictCuttingProcess" width="180">
        <template #default="scope">
          <el-select
            v-model="scope.row.dictCuttingProcess"
            placeholder="请选择下料工序"
            required
            :disabled="scope.row.disabled"
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(
                DICT_TYPE.CONFIG_MANUFACTURING_DETAILS_CUTTING_PROCESS
              )"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="下料类型" align="left" prop="dictCuttingType" width="180">
        <template #default="scope">
          <el-select
            v-model="scope.row.dictCuttingType"
            placeholder="请选择下料类型"
            required
            :disabled="scope.row.disabled"
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(
                DICT_TYPE.CONFIG_MANUFACTURING_DETAILS_CUTTING_TYPE
              )"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="是否机加" align="left" prop="dictIsMachining" width="180">
        <template #default="scope">
          <input
            type="checkbox"
            v-model="scope.row.dictIsMachining"
            class="custom-checkbox"
            :disabled="scope.row.isCanDisable"
          />
        </template>
      </el-table-column>
      <el-table-column label="机加工序" align="left" prop="dictMachiningProcess" width="180">
        <template #default="scope">
          <el-select
            v-model="scope.row.dictMachiningProcess"
            placeholder="请选择机加工序"
            :disabled="scope.row.isCanDisable"
            required
          >
            <el-option
              v-for="(dict, index) in getIntDictOptions(DICT_TYPE.MACHINING_PROCESS)"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="left" prop="dictStatus" width="180">
        <template #default="scope">
          <dict-tag
            :type="DICT_TYPE.CONFIG_MANUFACTURING_DETAILS_STATUS"
            :value="scope.row.dictStatus"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建人" align="left" prop="userNickName" width="180">
        <template #default="scope">
          <span>{{ scope.row.userNickName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="left" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ timestampToDateTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 上传文件 -->
  <CusUploadFile ref="cusUploadFile" @refresh="getList" />
  <!-- 导出 -->
  <ExportFile ref="exportRef" />
</template>

<script setup lang="ts" name="ManufacturingPartsListTaskChange">
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import * as ManufacturingPartsListTaskApi from '@/api/config/manufacturingPartsListTask'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const route = useRoute()
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const { push } = useRouter()
  const loading = ref(true) // 列表的加载中
  const total = ref(0) // 列表的总页数
  const list: any = ref([]) // 列表的数据
  const queryFormRef = ref() // 表单 Ref
  const queryParams: any = reactive({
    pageNo: 1,
    pageSize: 50,
    taskNumber: null,
    completionOrChangeNumber: null,
    productNumber: null,
    productName: null,
    drawingNumber: null,
    productStandard: null,
    partName: null,
    taskType: null,
    status: null,
    version: null,
    activeData: [],
    stopData: [],
    userNickName: null,
    createTime: []
  })
  //时间戳转换
  const timestampToDateTime = (timestamp) => {
    if (timestamp) {
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      const hours = ('0' + date.getHours()).slice(-2)
      const minutes = ('0' + date.getMinutes()).slice(-2)
      const seconds = ('0' + date.getSeconds()).slice(-2)
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    } else {
      return ''
    }
  }
  //关闭
  const closeData = () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/config/config/materiel/manufacturingPartsListTb')
  }
  /** 查询列表 */
  const getList = async () => {
    loading.value = true
    try {
      const data = await ManufacturingPartsListTaskApi.getManufacturingPartsListTaskPage(queryParams)
      list.value = data.list
      total.value = data.total
    } finally {
      loading.value = false
    }
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    getList()
  }
  /**导入显示 */
  const cusUploadFile = ref()
  /** 导出按钮操作 */

  /**获取详情数据 */
  const getDetail = async (id) => {
    const data = await ManufacturingPartsListTaskApi.getDetail(id)
    
    for (let i = 0; i < data.length; i++) {
      data[i].isCanDisable = true
      data[i].disabled = true
      data[i].xlDisable = true
      data[i].dictCuttingProcess = Number(data[i].dictCuttingProcess)
      data[i].dictCuttingType = Number(data[i].dictCuttingType)
      data[i].dictMachiningProcess = Number(data[i].dictMachiningProcess)
      if (data[i].dictInternalWork == 10) {
        data[i].dictInternalWork = true
      } else {
        data[i].dictInternalWork = false
      }
      if (data[i].dictOutsourcing == 10) {
        data[i].dictOutsourcing = true
      } else {
        data[i].dictOutsourcing = false
      }
      if (data[i].dictIsMachining == 10) {
        data[i].dictIsMachining = true
      } else {
        data[i].dictIsMachining = false
      }
    }
    for(let i = 0;i<data.length;i++) {
      if(data[i].dictCuttingProcess == "") {
        data[i].dictCuttingProcess = null
      }
      if(data[i].dictCuttingType == "") {
        data[i].dictCuttingType = null
      }
      if(data[i].dictMachiningProcess == "") {
        data[i].dictMachiningProcess = null
      }
    }
    list.value = data
  }
  /** 初始化 **/
  const tableHeight = ref(0)
  onMounted(async () => {
    const queryParamsHeight = queryFormRef.value.$el.clientHeight + 20
    tableHeight.value = document.body.clientHeight - 132 - queryParamsHeight - 130
    queryParams.productNumber = route.query.productNumber
    queryParams.productName = route.query.productName
    queryParams.drawingNumber = route.query.drawingNumber
    queryParams.productStandard = route.query.productStandard
    queryParams.version = route.query.version
    getDetail(route.query.id)
  })
</script>
<style lang="scss" scoped>
  input[type='checkbox'] {
    /* 隐藏默认的复选框 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 添加自定义样式 */
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #888;
    position: relative;
  }

  input[type='checkbox']::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #888; /* 实心点的颜色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0; /* 默认隐藏实心点 */
  }

  input[type='checkbox']:checked::before {
    opacity: 1; /* 显示实心点 */
  }
</style>
